<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击隐藏文字</title>
</head>
<style>

    *{
        padding:0;
        margin:0;
    }
    .box{
        width: 258px;
        margin:100px auto;
    }

    .box input{
        outline-style: none;
        border: none;
        width: 206px;
        height: 40px;
        background: url("left.jpg") no-repeat center;
        padding-left:10px;
        float: left;
    }

    .box button{
        float: left;
        width: 42px;
        height: 40px;
        background: url("right.jpg");
        border: none;
    }
</style>

<script>
    window.onload = function () {
        var text = document.getElementById("text");
        text.style.color = "darkgray";
        text.onfocus = function () {
            if (text.value == "请输入..." && text.style.color == "darkgray"){
                text.value = "";
                text.style.color = "black";
            }
        }

        text.onblur = function () {
            if (text.value == ""){
                text.value = "请输入...";
                text.style.color = "darkgray";
            }
        }
    }
</script>
<body>
    <div class="box">
        <input type="text" id="text" value="请输入...">
        <button id="btn"></button>
    </div>
</body>
</html>